<template>
  <div class="edit-menu">
    <a-modal
      title="权限分配"
      width="600px"
      :visible="visibles"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form class="permission-form" :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="菜单管理">
          <a-checkbox>全选</a-checkbox>
          <a-checkbox-group>
            <a-checkbox value="0">新增</a-checkbox>
            <a-checkbox value="1">修改</a-checkbox>
            <a-checkbox value="2">删除</a-checkbox>
            <a-checkbox value="3">详情</a-checkbox>
            <a-checkbox value="4">导出</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    visibles: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      confirmLoading: false,
      form: {}
    }
  },
  methods: {
    handleOk (e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel () {
      this.$emit('update:visibles', false)
    }
  }
}
</script>
